<template>
  <div style="display: flex">
    <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
    <div id="customerChart" style="width: 600px; height: 400px; flex: 1"></div>
    <div id="Charts" style="width: 600px; height: 400px; flex: 1"></div>
  </div>
</template>
<script>
//引入根组件节点
import { inject, onMounted } from "vue";

export default {
  name: "data_page",
  setup() {
    let echarts = inject("ec");
    onMounted(() => {
      //需要获取到element,所以是onMounted的Hook
      let myChart = echarts.init(document.getElementById("customerChart"));
      let Charts = echarts.init(document.getElementById("Charts"));
      // 绘制图表
      Charts.setOption({
        title: { text: "某地某年降水量" },
        tooltip: {
          trigger: "axis",
          axisPointer: { type: "cross" },
        },
        legend: {},
        xAxis: [
          {
            type: "category",
            axisTick: {
              alignWithLabel: true,
            },
            data: [
              "1月",
              "2月",
              "3月",
              "4月",
              "5月",
              "6月",
              "7月",
              "8月",
              "9月",
              "10月",
              "11月",
              "12月",
            ],
          },
        ],
        yAxis: [
          {
            type: "value",
            name: "降水量",
            min: 0,
            max: 250,
            position: "right",
            axisLabel: {
              formatter: "{value} ml",
            },
          },
          {
            type: "value",
            name: "温度",
            min: 0,
            max: 25,
            position: "left",
            axisLabel: {
              formatter: "{value} °C",
            },
          },
        ],
        series: [
          {
            name: "降水量",
            type: "bar",
            yAxisIndex: 0,
            data: [
              6, 32, 70, 86, 68.7, 100.7, 125.6, 112.2, 78.7, 48.8, 36.0, 19.3,
            ],
          },
          {
            name: "温度",
            type: "line",
            smooth: true,
            yAxisIndex: 1,
            data: [
              6.0, 10.2, 10.3, 11.5, 10.3, 13.2, 14.3, 16.4, 18.0, 16.5, 12.0,
              5.2,
            ],
          },
        ],
      });
      myChart.setOption({
        title: { text: "总用户量" },
        tooltip: {},
        xAxis: {
          //x轴
          name: "日期",
          data: ["12-3", "12-4", "12-5", "12-6", "12-7", "12-8"],
        },
        yAxis: { name: "数量", },
        series: [
          {
            name: "用户量",
            type: "line",
            data: [5, 20, 36, 10, 10, 20],
          },
        ],
      });
      window.onresize = function () {
        //自适应大小
        myChart.resize();
      };
    });
  },
};
</script>
